<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="申请变更SKU状态"
    width="936"
    draggable
    @close="close"
    :z-index="2000"
  >
    <el-scrollbar height="550px">
      <div class="mb-4">
        <vxe-table ref="tableRef" show-overflow :data="form.tableData">
          <vxe-column field="custom_sku" title="SKU/自定义"></vxe-column>
          <vxe-column field="specification" title="销售状态"></vxe-column>
          <vxe-column field="purchase_price" title="库存状态"></vxe-column>
          <vxe-column field="purchase_price" title="采购状态"></vxe-column>
        </vxe-table>
      </div>
      <div class="mb-4">
        <div class="mb-4 text-sm font-bold">申请备注</div>
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入"
          :autosize="{ minRows: 4, maxRows: 8 }"
        ></el-input>
      </div>
      <div class="mb-4">
        <div class="mb-4 text-sm font-bold">审批人</div>
        <el-select v-model="form.person" clearable placeholder="请选择" class="w-full">
          <el-option
            v-for="item in personOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-scrollbar>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save(formRef)">查询</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="ChangeState">
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";
const data = reactive({
  visible: false,
  loading: false,
  form: {
    tableData: [],
  },
  personOptions: [],
  load: false,
});
const { visible, loading, form, personOptions, load } = toRefs(data);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  form.value.tableData = data;
  visible.value = true;
};
const close = () => {
  visible.value = false;
};

const save = () => {
  ElMessage.error("暂未确定方案");
};
defineExpose({ open });
</script>
